<template>
  <div style="width:80%;margin: 20px auto;">
    <!-- ref 用来拿到这个日历对象  defaultView 默认以月份方式显示 locale 语言 header 头部的按钮 buttonText 头部按钮的文字 plugins 插件 weekends 是否显示周日周天 eventLimit 当框里面显示东西多的时候会显示+1 eventLimitText 在+1后面显示的文字 dateClick 点击事件 eventClick点击框里面内容事件 contentHeight 日历高度-->
    <FullCalendar
      ref="fullCalendar"
      defaultView="dayGridMonth"
      locale="zh-cn"
      allDaySlot: false
      :header="{
        left: 'prev,today,next,',
        center: 'title',
        right:'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :buttonText="buttonText"
      :plugins="calendarPlugins"
      weekends="ture"
      :events="getCalendarEvents"
      :eventLimit="true"
      eventLimitText="更多"
      @dateClick="handleDateClick"
      @eventClick="handleEventClick"
      :contentHeight="530"
    />

    <!-- 添加或修改排班信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="医生姓名">
          <el-select v-model="form.doctorId"  placeholder="请选择医生">
            <el-option
              v-for="item in doctorOptions"
              :key="item.doctorId"
              :label="item.name"
              :value="item.doctorId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker clearable size="small"
                          v-model="form.start"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker clearable size="small"
                          v-model="form.end"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="号源数">
          <el-input v-model="form.num" placeholder="请输入号源数" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import {MessageBox, Notification} from "element-ui";
import request from '@/utils/request'
export default {
  name: "Test",
  components: {
    // 注册
    FullCalendar
  },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 医生选项
      doctorOptions: [],
      // 表单参数
      form: {
        doctorId: null,
        start: null,
        end: null,
        num: null
      },
      // 事件名
      arg: "",
      events: [],
      buttonText: {
        prev: "◀️",
        next: "▶️",
        today: "📅",
        month: "月",
        week: "周",
        day: "日",
      },
      calendarPlugins: [
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin
      ],
      //   初始化加载列表
      calendarEvents: [],
      calendarEvents2: [],
      calendarApi: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询医生信息列表 */
    getList() {
      request({
      url: '/hospital/doctor/doctorlist',
      method: 'get',
    }).then(res => {
      this.doctorOptions = res.rows;
    });
    },
    getCalendarEvents(info, successCallback, failureCallback) {
      this.events = [];
      request({
        url: '/hospital/schedule/schedulelist',
        method: 'get'
      }).then(res=>{
        for(let i = 0; i < res.rows.length; i++) {
          this.events.push(res.rows[i]);
        }
        // const events = this.events;
        // // 返回数据加载页面时显示在日历上
        successCallback(this.events);
      }).catch()
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        doctorId: null,
        start: null,
        end: null,
        num: null
      };
      this.resetForm("form");
    },
    // 点击触发事件
    handleDateClick(arg) {
      console.log(arg);
      this.reset();
      this.form.start = this.GMTToStr(arg.date);
      this.form.end = this.GMTToStr2(arg.date);
      this.open = true;
      this.title = "添加排班信息";
    },
    /** 提交按钮 */
    submitForm() {
      request({
        url: '/hospital/schedule',
        method: 'post',
        data: this.form
      }).then(response => {
        this.events=[];
        this.$modal.msgSuccess("新增成功");
        this.open = false;
        this.calendarApi.refetchEvents();
      });
    },
    // 点击已经添加的内容
    handleEventClick(info) {
      console.log(info.event);
      MessageBox.alert("所在科室:" + info.event.extendedProps.department + "\n" + "所在院区:" + info.event.extendedProps.area + "\n" + "医生状态:" + info.event.extendedProps.state+ "\n" + "剩余号源:" + info.event.extendedProps.num, info.event.title + "\n"+ "医生的信息")
    },
    GMTToStr(time){
      var date = new Date(time)
      var Str=date.getFullYear() + '-' +
        (date.getMonth() + 1) + '-' +
        date.getDate() + ' ' +
        date.getHours() + ':' +
        date.getMinutes() + ':' +
        date.getSeconds()
      return Str
    },
    GMTToStr2(time){
      var date = new Date(time)
      var Str=date.getFullYear() + '-' +
        (date.getMonth() + 1) + '-' +
        date.getDate() + ' ' +
        (date.getHours()+ 8) + ':' +
        date.getMinutes() + ':' +
        date.getSeconds()
      return Str
    },
  },
  mounted() {
    //  把日历对象赋值以便操作日历
    this.calendarApi = this.$refs.fullCalendar.getApi();
  }
};
</script>

<style lang='css'>
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>
